<template>
<div>
  <Row type="flex" :gutter="18">
    <panel shadow v-if="contests.length" class="contest">
    </panel>
    <Rotation></Rotation>
  </Row>
</div>

</template>

<script>
  import Rotation from './Rotation.vue'
  import api from '@oj/api'
  import time from '@/utils/time'
  import { CONTEST_STATUS } from '@/utils/constants'

  export default {
    name: 'home',
    components: {
      Rotation
    },
    data () {
      return {
        contests: [],
        index: 0
      }
    },
    mounted () {
      let params = {status: CONTEST_STATUS.NOT_START}
      api.getContestList(0, 5, params).then(res => {
        this.contests = res.data.data.results
      })
    },
    methods: {
      getDuration (startTime, endTime) {
        return time.duration(startTime, endTime)
      },
      goContest () {
        this.$router.push({
          name: 'contest-details',
          params: {contestID: this.contests[this.index].id}
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .contest {
    margin: 0 auto;
   
   
  }
  .announcement {
    margin-top: 20px;
  }
</style>
